<template>
    <div class="OperatingQuota-box">
        <div class="box-header">
            <h5>总经营额度</h5>
            <div class="timeQuery">
                <p v-for="(item, index) in  timeData " :class="{ 'active': activeTime === index }" @click="activeFn(index)">
                    {{ item.time }}</p>
            </div>
        </div>
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
let activeTime = ref(0)
let timeData = ref([
    {
        time: '年度',
        i: 0
    },
    {
        time: '季度',
        i: 1
    },
    {
        time: '月度',
        i: 2
    },
    {
        time: '周度',
        i: 3
    },
])
// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let echartData = ref([{
    name: "2017年",
    value1: 400,
    value2: 533,
    value3: 688
},
{
    name: "2018年",
    value1: 438,
    value2: 633,
    value3: 423
},
{
    name: "2019年",
    value1: 850,
    value2: 500,
    value3: 656
},
{
    name: "2020年",
    value1: 973,
    value2: 580,
    value3: 756
},
{
    name: "2021年",
    value1: 280,
    value2: 699,
    value3: 739
},
{
    name: "2022年",
    value1: 550,
    value2: 633,
    value3: 407
},
{
    name: "2023年",
    value1: 780,
    value2: 610,
    value3: 823
},
{
    name: "2024年",
    value1: 830,
    value2: 180,
    value3: 800
}])

let target = ref(null);
let myChart = null;
let bgColor = "#fff";
let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69"
];
const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
}

let xAxisData = ref(echartData.value.map(v => v.name))
let yAxisData1 = ref(echartData.value.map(v => v.value1))
let yAxisData2 = ref(echartData.value.map(v => v.value2))
let yAxisData3 = ref(echartData.value.map(v => v.value3))
let options = ref({
    backgroundColor: bgColor,
    color: color,
    legend: {
        right: 'center',
        top: 0,
        textStyle: {
            color: "#9FACBC"
        },
    },
    tooltip: {
        trigger: "axis",
        formatter: function (params) {
            let html = '';
            params.forEach(v => {
                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.name}.${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                万`;
            })
            return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: '#ffffff',
                shadowColor: 'rgba(225,225,225,1)',
                shadowBlur: 5
            }
        }
    },
    grid: {
        top: 80,
        left: 0,
        right: 60,
        bottom: 0,
        containLabel: true
    },
    xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
            formatter: '{value}',
            color: "#9FACBC"
        },
        axisLine: {
            lineStyle: {
                color: "#293755"
            }
        },
        data: xAxisData.value
    }],
    yAxis: [{
        type: "value",
        name: '单位：万',
        axisLabel: {
            color: "#9FACBC"
        },
        nameTextStyle: {
            color: "#9FACBC",
            fontSize: 12,
            lineHeight: 40
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#293755"
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: "数据API",
        type: "line",
        smooth: true,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[0], 0.2)
                },
                {
                    offset: 1,
                    color: hexToRgba(color[0], 0)
                }
                ],
                false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10
        },
        data: yAxisData1.value
    }, {
        name: "服务API",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            color: color[1],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 8
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[1], 0.2)
                },
                {
                    offset: 1,
                    color: hexToRgba(color[1], 0)
                }
                ],
                false
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10
        },
        data: yAxisData2.value
    }, {
        name: "数据回写API",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            color: color[2],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[2], 0.5),
            shadowOffsetY: 8
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: hexToRgba(color[2], 0.2)
                },
                {
                    offset: 1,
                    color: hexToRgba(color[2], 0)
                }
                ],
                false
            ),
            shadowColor: hexToRgba(color[2], 0.1),
            shadowBlur: 10
        },
        data: yAxisData3.value
    }]
})
onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});
watch(
    () => echartData.value,
    () => {
        xAxisData.value = echartData.value.map(v => v.name)
        yAxisData1.value = echartData.value.map(v => v.value1)
        yAxisData2.value = echartData.value.map(v => v.value2)
        yAxisData3.value = echartData.value.map(v => v.value3)
        options.value = {
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 'center',
                top: 0,
                textStyle: {
                    color: "#9FACBC"
                },
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    let html = '';
                    params.forEach(v => {
                        html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.name}.${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                万`;
                    })
                    return html
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: '#ffffff',
                        shadowColor: 'rgba(225,225,225,1)',
                        shadowBlur: 5
                    }
                }
            },
            grid: {
                top: 80,
                left: 0,
                right: 60,
                bottom: 0,
                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    color: "#9FACBC"
                },
                axisLine: {
                    lineStyle: {
                        color: "#293755"
                    }
                },
                data: xAxisData.value
            }],
            yAxis: [{
                type: "value",
                name: '单位：万',
                axisLabel: {
                    color: "#9FACBC"
                },
                nameTextStyle: {
                    color: "#9FACBC",
                    fontSize: 12,
                    lineHeight: 40
                },
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#293755"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [{
                name: "数据API",
                type: "line",
                smooth: true,
                // showSymbol: false,/
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: hexToRgba(color[0], 0.2)
                        },
                        {
                            offset: 1,
                            color: hexToRgba(color[0], 0)
                        }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10
                },
                data: yAxisData1.value
            }, {
                name: "服务API",
                type: "line",
                smooth: true,
                // showSymbol: false,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[1], 0.5),
                    shadowOffsetY: 8
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: hexToRgba(color[1], 0.2)
                        },
                        {
                            offset: 1,
                            color: hexToRgba(color[1], 0)
                        }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10
                },
                data: yAxisData2.value
            }, {
                name: "数据回写API",
                type: "line",
                smooth: true,
                // showSymbol: false,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    color: color[2],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[2], 0.5),
                    shadowOffsetY: 8
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: hexToRgba(color[2], 0.2)
                        },
                        {
                            offset: 1,
                            color: hexToRgba(color[2], 0)
                        }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[2], 0.1),
                    shadowBlur: 10
                },
                data: yAxisData3.value
            }]
        }
        renderChart();
    }, {
    deep: true
}
);
const activeFn = (i) => {
    activeTime.value = i
    console.log(i);
    switch (i) {
        case 0:
            echartData.value = [{
    name: "2017年",
    value1: 400,
    value2: 533,
    value3: 688
},
{
    name: "2018年",
    value1: 438,
    value2: 633,
    value3: 423
},
{
    name: "2019年",
    value1: 850,
    value2: 500,
    value3: 656
},
{
    name: "2020年",
    value1: 973,
    value2: 580,
    value3: 756
},
{
    name: "2021年",
    value1: 280,
    value2: 699,
    value3: 739
},
{
    name: "2022年",
    value1: 550,
    value2: 633,
    value3: 407
},
{
    name: "2023年",
    value1: 780,
    value2: 610,
    value3: 823
},
{
    name: "2024年",
    value1: 830,
    value2: 180,
    value3: 800
}
            ]
            break;
        case 1:
            echartData.value = [{
                name: "一季",
                value1: 200,
                value2: 683,
                value3: 488
            },
            {
                name: "二季",
                value1: 338,
                value2: 633,
                value3: 300
            },
            {
                name: "三季",
                value1: 450,
                value2: 600,
                value3: 356
            },
            {
                name: "四季",
                value1: 473,
                value2: 280,
                value3: 300
            }
            ]
            break;
        case 2:
            echartData.value = [{
                name: "1月",
                value1: 100,
                value2: 283,
                value3: 100
            },
            {
                name: "2月",
                value1: 338,
                value2: 133,
                value3: 100
            },
            {
                name: "3月",
                value1: 450,
                value2: 100,
                value3: 356
            },
            {
                name: "4月",
                value1: 100,
                value2: 280,
                value3: 256
            },
            {
                name: "5月",
                value1: 180,
                value2: 100,
                value3: 239
            },
            {
                name: "6月",
                value1: 150,
                value2: 100,
                value3: 307
            },
            {
                name: "7月",
                value1: 100,
                value2: 700,
                value3: 500
            },
            {
                name: "8月",
                value1: 0,
                value2: 0,
                value3: 0
            },
            {
                name: "9月",
                value1: 0,
                value2: 0,
                value3: 0
            },
            {
                name: "10月",
                value1: 0,
                value2: 0,
                value3: 0
            },
            {
                name: "11月",
                value1: 0,
                value2: 0,
                value3: 0
            },
            {
                name: "12月",
                value1: 0,
                value2: 0,
                value3: 0
            }
            ]
            break;
        case 3:
            echartData.value = [{
                name: "第一周",
                value1: 500,
                value2: 283,
                value3: 488
            },
            {
                name: "第二周",
                value1: 338,
                value2: 500,
                value3: 623
            },
            {
                name: "第三周",
                value1: 500,
                value2: 600,
                value3: 356
            },
            {
                name: "第四周",
                value1: 473,
                value2: 280,
                value3: 256
            }
            ]
            break;
        default:
            break;
    }
}

const renderChart = () => {
    console.log(options.value);
    myChart.setOption(options.value);
    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.OperatingQuota-box {
    width: 100%;
    height: 100%;
    cursor: pointer;

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 40px 0;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }

    .box-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;

        .timeQuery {
            border: 1px solid #707070;
            width: 180px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 2px 2px 2px 2px;

            p {
                width: 194px;
                height: 28px;
                text-align: center;
                line-height: 28px;
            }

            .active {
                background: #E2E7FF;
                box-shadow: inset -1px -1px 2px 1px rgba(0, 0, 0, 0.16);
                border-radius: 2px 2px 2px 2px;
                color: #1947FF;
            }
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 80px);
    }
}
</style>
